<template>
  <div>
    <el-container>
      <el-header>
        <div class="menu">
          <div>
            <i class="el-icon-menu">
              <router-link
                to="/home"
                style="text-decoration: none; color: black"
                >管理台</router-link
              >
            </i>
          </div>
          <div>
            <div class="block">
              <el-avatar :size="40" :src="circleUrl"></el-avatar>
              <span>你好,Match</span>
              <a href="">退出</a>
            </div>
          </div>
        </div>
      </el-header>
      <el-container>
        <el-aside width="300px" style="background-color:#545c64">
          <!-- 头像 -->
          <!-- <div class="avatar">
            <el-row class="demo-avatar demo-basic">
              <el-col :span="4">
                <div class="demo-basic--circle">
                  <div class="block">
                    <el-avatar :size="50" :src="circleUrl"></el-avatar>
                  </div>
                  <h3>Match</h3>
                  <p>1099336424@qq.com</p>
                </div>
              </el-col>
            </el-row>
          </div> -->
          <el-menu class="el-menu-demo" @select="handleSelect" active-text-color="#ffd04b" background-color="#545c64" text-color="#fff" style="border-right-color:#545c64">
           <!-- 商品管理 -->
            <el-submenu index="1">
              <template slot="title">
                <i class="el-icon-s-unfold"></i>
                <span>商品管理</span>
              </template>
              <el-menu-item-group>
                <el-menu-item index="1-1">商品列表</el-menu-item>
                <el-menu-item index="1-2">添加/维护商品</el-menu-item>
                <el-menu-item index="1-3">商品规格维护</el-menu-item>
              </el-menu-item-group>
            </el-submenu>
            <!-- 订单管理 -->
            <el-submenu index="2">
              <template slot="title">
                <i class="el-icon-s-goods"></i>
                <span>订单管理</span>
              </template>
              <el-menu-item-group>
                <el-menu-item index="2-1">订单列表</el-menu-item>
              </el-menu-item-group>
            </el-submenu>
            <el-submenu index="3">
              <template slot="title">
                <i class="el-icon-s-custom"></i>
                <span>用户管理</span>
              </template>
              <el-menu-item-group>
                <el-menu-item index="3-1">用户列表</el-menu-item>
              </el-menu-item-group>
            </el-submenu>
          </el-menu>
          <div class="line"></div>
        </el-aside>
        <el-main>
          <router-view></router-view>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script>
export default {
  data() {
    return {
      circleUrl:
        "https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png",
    };
  },
  methods: {
    // 导航栏选择
    handleSelect(key, keyPath) {
      // console.log(this.$route);
      if (this.$route.path != "/detail") {
        this.$router.push("/detail");
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.el-header {
  background-color: #b3c0d1;
  color: #333;
  line-height: 60px;
  // padding: 0;
  .menu {
    display: flex;
    justify-content: space-between;
    // height: 60px;
    align-items: center;
    a {
      margin: 0 5px;
    }
  }
  .menu > div:first-child {
    width: 300px;
    font-size: 30px;
    margin-left: 1rem;
  }
  .block {
    // height: 50px;
    line-height: 50px;
    .el-avatar {
      vertical-align: middle;
    }
  }
}

.el-aside {
  background-color: #d3dce6;
  color: #333;
  text-align: left;
  height: 870px;
}

.el-main {
  background-color: #e9eef3;
  color: #333;
  text-align: center;
  height: 870px;
}

body > .el-container {
  margin-bottom: 40px;
}
</style>